<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.css">
    <script type="text/javascript" src="../../script/jquery-3.5.1.js"></script>
    <style type="text/css">
        #addForm input,#updateForm input{
            width:50%;
        }
        #addForm,#updateForm{
            padding: 20px 0px;
        }
        #addForm p,#updateForm p{
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <!--1.添加模态框-->
    <div id="addModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">添加用户</h4>
                </div>
                <div class="media-body">
                    <form class="form-inline text-center" id="addForm">
                        <p>
                            <img src="../../images/user/5.jpg" width="100px" class="img-circle">
                        </p>
                        <p>
                            用户名:<input type="text" name="userName" class="form-control" placeholder="请输入用户名">
                        </p>
                        <p>
                            密　码:<input type="text" name="userPass" class="form-control" placeholder="请输入密码">
                        </p>
                        <p>
                            手机号:<input type="text" name="userPhone" class="form-control" placeholder="请输入手机号码">
                        </p>
                        <p>
                            头　像:<input type="file" name="userImg" class="form-control" >
                        </p>
                        <p>
                            <button type="button" class="btn btn-primary" >确认添加</button>
                            <button type="button" class="btn btn-primary"  data-dismiss="modal">返回首页</button>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--2.修改模态框-->
    <div id="updateModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">修改用户</h4>
                </div>
                <div class="media-body">
                    <form class="form-inline text-center" id="updateForm">
                        <p>
                            <img src="../../images/user/5.jpg" width="100px" class="img-circle">
                        </p>
                        <p>
                            编　号:<input type="text" name="userName" class="form-control" placeholder="请输入用户编号">
                        </p>
                        <p>
                            用户名:<input type="text" name="userName" class="form-control" placeholder="请输入用户名">
                        </p>
                        <p>
                            密　码:<input type="text" name="userPass" class="form-control" placeholder="请输入密码">
                        </p>
                        <p>
                            手机号:<input type="text" name="userPhone" class="form-control" placeholder="请输入手机号码">
                        </p>
                        <p>
                            头　像:<input type="file" name="userImg" class="form-control" >
                        </p>
                        <p>
                            <button type="button" class="btn btn-primary" >确认修改</button>
                            <button type="button" class="btn btn-primary"  data-dismiss="modal">返回首页</button>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--3.上传模态框-->
    <div id="upModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">上传文件</h4>
                </div>
                <div class="media-body">
                    <form class="form-inline text-center">
                        <p style="margin-top: 20px">
                            选择文件:<input type="file" class="form-control" name="fileName">
                        </p>
                        <p>
                            <input type="button" value="开始上传" class="btn btn-primary">
                            <input type="button" value="返回首页" class="btn btn-primary" data-dismiss="modal">
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--4.主体内容-->
    <div class="container-fluid">
        <div class="row" style="line-height: 60px">
            <form class="col-md-8 form-inline ">
                编号:
                <input type="text" placeholder="请输入用户编号" class="form-control" style="width:140px">
                　用户名:
                <input type="text" placeholder="请输入用户姓名" class="form-control" style="width:140px">
                　手机:
                <input type="text" placeholder="请输入手机号码" class="form-control" style="width:140px">
                <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span>搜索</button>
            </form>

            <div class="navbar-right text-right" style="margin-right: 20px">
                <a href="#" class="btn btn-default"><span class="glyphicon glyphicon-download-alt"></span>下载</a>
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#upModal"><span class="glyphicon glyphicon-upload"></span>上传</button>
                <button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-remove-sign"></span>批量删除</button>
                <button type="button" class="btn btn-info " data-toggle="modal" data-target="#addModal"><span class="glyphicon glyphicon-plus"></span>添加</button>
            </div>
        </div>
        <div class="row">
            <table class="col-md-12 table-bordered text-center table-hover">
                <tr style="line-height:60px">
                    <td><input type="checkbox">全选/全消</td>
                    <td>编号</td>
                    <td>用户名</td>
                    <td>手机号码</td>
                    <td>用户头像</td>
                    <td>用户类别</td>
                    <td colspan="2">操作</td>
                </tr>
                <tr>
                    <td>选择<input type="checkbox"></td>
                    <td>1</td>
                    <td>赔钱虎</td>
                    <td>12581</td>
                    <td><img src="../../images/user/2.jpg" width="60px" class="img-circle"></td>
                    <td>普通用户</td>
                    <td><a href="#" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>删除</a></td>
                    <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#updateModal"><span class="glyphicon glyphicon-pencil"></span>修改</a></td>
                </tr>
                <tr>
                    <td>选择<input type="checkbox"></td>
                    <td>2</td>
                    <td>托儿索</td>
                    <td>12582</td>
                    <td><img src="../../images/user/3.jpg" width="60px" class="img-circle"></td>
                    <td>普通用户</td>
                    <td><a href="#" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>删除</a></td>
                    <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#updateModal"><span class="glyphicon glyphicon-pencil"></span>修改</a></td>
                </tr>
                <tr>
                    <td>选择<input type="checkbox"></td>
                    <td>3</td>
                    <td>李白白</td>
                    <td>12583</td>
                    <td><img src="../../images/user/4.jpg" width="60px" class="img-circle"></td>
                    <td>普通用户</td>
                    <td><a href="#" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>删除</a></td>
                    <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#updateModal"><span class="glyphicon glyphicon-pencil"></span>修改</a></td>
                </tr>
            </table>
        </div>
        <div class="text-center">
            <ul class="pagination">
                <li><a href="#">&laquo;</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>
    </div>
<script type="text/javascript" src="../../script/bootstrap.js"></script>
</body>
</html>